import React, { useState, useEffect } from "react";

interface FullscreenComponentProps {
  width: number;
  height: number;
  children: any;
}

const FullscreenComponent: React.FC<FullscreenComponentProps> = ({
  width,
  height,
  children,
}) => {
  const [scaleX, setScaleX] = useState<number>(1);
  const [scaleY, setScaleY] = useState<number>(1);

  // 自适应函数
  const calculateScale = (width: number, height: number) => {
    const scaleW = window.innerWidth / width;
    const scaleH = window.innerHeight / height;
    return { x: scaleW, y: scaleH };
  };

  // 设置缩放比例
  const updateScale = () => {
    const { x, y } = calculateScale(width, height);
    setScaleX(x);
    setScaleY(y);
  };

  useEffect(() => {
    updateScale();
    // 监听窗口大小变化
    window.addEventListener("resize", updateScale);
    return () => {
      window.removeEventListener("resize", updateScale);
    };
  }, [width, height]);

  return (
    <div
      className="fullscreen-container"
      style={{
        transform: `scale(${scaleX}, ${scaleY}) translate(-50%, -50%)`,
        WebkitTransform: `scale(${scaleX}, ${scaleY}) translate(-50%, -50%)`,
        width: `${width}px`,
        height: `${height}px`,
        position: "absolute",
        top: "50%",
        left: "50%",
        transformOrigin: "top left",
      }}
    >
      {children}
    </div>
  );
};

export default FullscreenComponent;
